<template>
  <el-dialog :model-value="visible" :title="'规则与示例'" width="850px" center align-center destroy-on-close @close="onClose">
    <div class="desc">
      <div class="title">题型识别：【单选题】、【多选题】、【判断题】、【填空题】、【简答题】</div>
      <div class="title">题干识别：按编号识别，支持 1. 或 1、或 1:</div>
      <el-text>如：【单选题】1.我是一个题干示例</el-text>
    </div>
    <div class="desc">
      <div class="title">选项识别：按字母识别，支持 A. 或 A、或 A:</div>
      <el-text>如：A.我是一个选项示例</el-text>
    </div>
    <div class="desc">
      <div class="title">答案识别：答案必填，按关键词识别，支持 答案：或 答案:</div>
      <div>单选题：答案：A</div>
      <div>多选题：答案：A、B</div>
      <div>判断题：答案：对（支持：对、错、或者 正确、错误）</div>
      <div>其他题：答案：我是一个答案示例</div>
    </div>
    <div class="desc">
      <div class="title">难度识别：按关键词识别，支持 难度：或 难度:</div>
      <el-text>如：难度：一般（支持简单、一般、困难 3个级别）</el-text>
    </div>
    <div class="desc">
      <div class="title">解析识别：按关键词支持，支持 解析：或 解析:</div>
      <el-text>如：解析：我是一个解析示例</el-text>
    </div>
  </el-dialog>
</template>

<script setup>
  import { ref } from 'vue'

  // 打开和关闭
  const visible = ref(false) // 弹窗显示状态
  const onOpen = () => {
    visible.value = true
  }
  defineExpose({ onOpen })
  const onClose = () => {
    visible.value = false
  }
</script>
<style lang="scss" scoped>
  .desc {
    margin-bottom: 20px;
    line-height: 25px;
    .title {
      font-weight: bold;
    }
  }
</style>
